<template>
	<div>
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商城管理</el-breadcrumb-item>
			<el-breadcrumb-item>商户管理</el-breadcrumb-item>
			<el-breadcrumb-item>选择品牌</el-breadcrumb-item>
			<el-breadcrumb-item>编辑商户</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<p>基本信息</p>
			<el-divider></el-divider>
			<el-row :gutter="60">
				<el-col :span="12">
					<span>序号</span>
					<el-input v-model="infoList.sort" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>商户名称</span>
					<el-input v-model="infoList.shopName" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>品类</span>
					<el-input v-model="infoList.sort" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>所在地</span>
					<el-input v-model="infoList.city" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>联系方式</span>
					<el-input v-model="infoList.shopPhone" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>地址</span>
					<el-input v-model="infoList.shopAddress" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>logo</span>
					<el-input v-model="infoList.shopAddress" disabled></el-input>
				</el-col>
			</el-row>
			<p>详细信息</p>
			<el-divider></el-divider>
			<el-row :gutter="60">
				<el-col :span="24" style="align-items: flex-start;">
					<span>商户头图</span>
					<div class="imgList">
						<div class="imgItem" v-for="(item,index) in infoList.firstImgList">
							<img :src="item.firstUrl" alt="">
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<span>营业时间</span>
					<el-input v-model="infoList.shopHours" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>开业时间</span>
					<el-input v-model="infoList.shopOpenHours" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>门店面积</span>
					<el-input v-model="infoList.shopStoreArea" disabled></el-input>
				</el-col>
				<el-col :span="12">
					<span>其他设施</span>
					<el-input v-model="infoList.shopFacilities" disabled></el-input>
				</el-col>
				<el-col :span="24" style="align-items: flex-start;">
					<span>商户介绍图</span>
					<div class="imgList">
						<div class="imgItem" v-for="(item,index) in infoList.secondImgList">
							<img :src="item.secondUrl" alt="">
						</div>
					</div>
				</el-col>
			</el-row>
			<p>商品管理</p>
			<el-divider></el-divider>
			<el-button type="primary">添加</el-button>
			<el-table :data="infoList.itemsInfoList" border stripe>
				<el-table-column prop="sort" label="商品序号"></el-table-column>
				<el-table-column prop="itemName" label="商品名称"></el-table-column>
				<el-table-column prop="priceNormal" label="价格"></el-table-column>
				<el-table-column prop="reserveCounts" label="库存"></el-table-column>
				<el-table-column label="属性"></el-table-column>
				<el-table-column label="状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.onOffStatus==1" type="success">已上架</el-tag>
						<el-tag v-else-if="scope.row.onOffStatus==0" type="danger">未上架</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" type="primary">查看</el-button>
						<el-button size="mini" type="primary">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-button type="primary">保存</el-button>
			<el-button>取消</el-button>
		</el-card>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				infoList:{}
			}
		},
		created() {
			this.getInfo()
		},
		methods:{
			async getInfo(){
				// var id = this.$route.query.id
				const {data:res} = await this.$http.post('/shopManage/queryDetailsByShopId',{id:33})
				this.infoList = res.data
			}
		}
	}
</script>

<style lang="less" scoped>
	p{color: #1663af;font-weight: 600;}
	.el-col{
		display: flex;
		align-items: center;
		margin-bottom: 25px;
		span{
			display: inline-block;
			width: 80px;
			text-align: right;
			margin-right: 15px;
		}
		.el-input{
			width: 80%;
		}
	}
	.imgList{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.imgItem{
			height: 90px;
			width: 160px;
			margin-right: 15px;
			border: 1px solid #c6c6c6;
			img{
				height: 100%;
				width: 100%;
			}
		}
	}
	.el-table{
		margin-bottom: 25px;
	}
</style>
